<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/alert.css">
    <link rel="stylesheet" href="js/layer.css">
    <title>首页</title>
  </head>

  <body>
    <div class="container">
      <!-- 头部导航 -->
      <nav>
        <div class="content">
          <div class="logo">
            <a href="./index.html">
              <img src="./images/logo.png" alt="">
            </a>
          </div>
          <div class="nav">
            <ul>
              <li>
                <a href="">首页</a>
              </li>
              <li>
                <a href="">营销模板</a>
              </li>
              <li>
                <a href="">店铺管理</a>
                <ul>
                  <li class="active"><a href="javascript:;">自动重发</a></li>
                  <li><a href="javascript:;">自动评价</a></li>
                  <li><a href="javascript:;">自动橱窗</a></li>
                  <li><a href="javascript:;">批量修改</a></li>
                  <li><a href="javascript:;">一键复制</a></li>
                  <li><a href="javascript:;">宝贝备份</a></li>

                </ul>
              </li>
              <li>
                <a href="">快递打印</a>
              </li>
              <li>
                <a href="">客服关怀</a>
              </li>
              <li>
                <a href="">促销活动</a>
              </li>
              <li>
                <a href="">标题优化</a>
              </li>
            </ul>
          </div>
          <div class="user">
            <div class="item business">
              <div>剩余时间：90天</div>
              <div>剩余短信：0条</div>
            </div>
            <div class="item recharge">
              <div class="xf"> 续费 </div>
              <div class="cz"> 充值 </div>
            </div>
            <div class="item username">
              <span>我是个用户名</span>
              <i></i>
            </div>
          </div>
        </div>
      </nav>
      <div style="height:70px"></div>
      <!-- 公告 -->
      <div class="content" style="margin-bottom:100px;">
        <div class="announcement">
          <span>重要通知：春节放假，客服放假时间：2-1到2-7，如果问题，请留言，节后统一处理。</span>
        </div>
        <!-- Swiper -->

        <div class="swiper-container swiper-container01">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="images/banner_07.png" alt="">
              <div class="optimization_btn">
                <img src="images/btn_07.png" alt="">
              </div>
              <div class="close_btn">
                <img src="images/close_03.png" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/banner_07.png" alt="">
              <div class="optimization_btn">
                <img src="images/btn_07.png" alt="">
              </div>
              <div class="close_btn">
                <img src="images/close_03.png" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/banner_07.png" alt="">
              <div class="optimization_btn">
                <img src="images/btn_07.png" alt="">
              </div>
              <div class="close_btn">
                <img src="images/close_03.png" alt="">
              </div>
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination01"></div>
        </div>

        <!-- 主内容 -->
        <!-- 第一块 -->
        <div class="Bill--item">
          <ul>
            <li>
              <img src="images/Features.png" alt="">
            </li>
            <li class="mid">
              <div class="top">
                <div class="con">
                  <ul>
                    <li>
                      <span class="title">出售中商品</span>
                      <span class="num">186</span>
                      <div class="btn active"><a href="javascript:;">一键复制</a></div>
                    </li>
                    <li>
                      <span class="title">橱窗数</span>
                      <span class="num">55</span>
                      <div class="btn"><a href="javascript:;">自动橱窗</a></div>
                    </li>
                    <li>
                      <span class="title">待评价</span>
                      <span class="num">55</span>
                      <div class="btn"><a href="javascript:;">自动评价</a></div>
                    </li>
                    <li>
                      <span class="title">待发货</span>
                      <span class="num">186</span>
                      <div class="btn"><a href="javascript:;">立即打印</a></div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="bottom">
                <div class="title">快捷功能</div>
                <div class="con">
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_01.png" alt="">
                      <span>关联营销</span>
                    </div>
                  </a>
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_02.png" alt="">
                      <span>自动重发</span>
                    </div>
                  </a>
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_03.png" alt="">
                      <span>标题优化</span>
                    </div>
                  </a>
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_04.png" alt="">
                      <span> 一键复制</span>
                    </div>
                  </a>
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_05.png" alt="">
                      <span>快递打印</span>
                    </div>
                  </a>
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_05.png" alt="">
                      <span>客户关怀</span>
                    </div>
                  </a>
                  <a href="javascript:;">
                    <div class="Feat--item">
                      <img src="images/Features_05.png" alt="">
                      <span> 店铺统计</span>
                    </div>
                  </a>
                </div>
              </div>
            </li>
            <!-- 公告及教程 -->
            <li class="Announcement_tutorial">
              <div class="nav">
                <div class="announcements ">公告</div>
                <div class="tutorial active">教程</div>
              </div>
              <div class="list">
                <ul class="cont-tab-line tutorial">
                  <img src="images/ewm_03.png" alt="">
                  <span>微信扫一扫，关注动态</span>
                </ul>
                <ul class="cont-tab-line">
                  <li>
                    <a href="javascript:;">【教程】软件使用常见问题解答 </a>
                  </li>
                  <li>
                    <a href="javascript:;">【教程】软件使用常见问题解答 </a>
                  </li>
                  <li>
                    <a href="javascript:;">【教程】软件使用常见问题解答 </a>
                  </li>
                  <li>
                    <a href="javascript:;">【教程】软件使用常见问题解答 </a>
                  </li>
                  <li>
                    <a href="javascript:;">【教程】软件使用常见问题解答 </a>
                  </li>
                </ul>

              </div>

            </li>
          </ul>
        </div>
        <!-- 第二块 -->
        <div class="Features--item">
          <div class="title">
            <img src="images/nav.png" alt="">
          </div>
          <div class="con">

            <div class="list">
              <ul>
                <li><a href="javascript:;"></a> <span>自动重发</span></li>
                <li><a href="javascript:;"> <span>自动橱窗</span></a></li>
                <li><a href="javascript:;"> <span>标题优化</span></a></li>
                <li><a href="javascript:;"><span>宝贝推广</span></a></li>
                <li><a href="javascript:;"><span>短信关怀</span></a></li>
              </ul>
              <div class="line"></div>
              <ul>
                <li><a href="javascript:;"> <span>关联营销</span></a></li>
                <li><a href="javascript:;"><span>团购营销</span></a></li>
                <li><a href="javascript:;"><span>搭配套餐</span></a></li>
                <li><a href="javascript:;"> <span>海报制作</span></a></li>
                <li><a href="javascript:;"><span>主图水印</span></a></li>
              </ul>
              <div class="line"></div>
              <ul>
                <li><a href="javascript:;"><span>订单打印</span></a></li>
                <li><a href="javascript:;"><span>批量修改</span></a></li>
                <li><a href="javascript:;"><span>自动评价</span></a></li>
                <li><a href="javascript:;"><span>一键复制</span></a></li>
                <li style="opacity: 0"></li>
              </ul>
              <div class="line"></div>
              <ul>
                <li><a href="javascript:;"><span>店铺总览</span></a></li>
                <li><a href="javascript:;"><span>商品分析</span></a></li>
                <li><a href="javascript:;"><span>回头率</span></a></li>
                <li style="opacity: 0"></li>
                <li style="opacity: 0"></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 第三块 -->
        <div class="three--item">
          <ul>
            <li>
              <div class="title">打单发货</div>
              <div class="imgs">
                <img src="images/img01.png" alt="">
              </div>
              <div class="info">
                <div class="info--item">
                  <img src="images/icon_01.png" alt="">
                  <span>打印快递单</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_02.png" alt="">
                  <span>打印配货单</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_03.png" alt="">
                  <span>批量发货</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_04.png" alt="">
                  <span>连打500单不出错</span>
                </div>
              </div>
              <div class="button">
                立即打印
              </div>
            </li>
            <li>
              <div class="title">客户管理</div>
              <div class="imgs">
                <img src="images/img02.png" alt="">
              </div>
              <div class="info item02">
                <div class="info--item">
                  <img src="images/icon_05.png" alt="">
                  <span>给客户发短信</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_06.png" alt="">
                  <span>维护忠诚客户</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_07.png" alt="">
                  <span>转化活跃客服</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_08.png" alt="">
                  <span>唤醒沉睡客户</span>
                </div>
              </div>
              <div class="button">
                立即使用
              </div>
            </li>
            <li>
              <div class="title">主图水印</div>
              <div class="imgs2">
                <img src="images/img033.png" alt="">
              </div>
              <div class="button">
                立即优化
              </div>
            </li>
            <li>
              <div class="title">标题一键优化</div>
              <div class="imgs1">
                <img src="images/img04.png" alt="">
              </div>
              <div class="info item02">
                <div class="info--item">
                  <img src="images/icon_09.png" alt="">
                  <span>自动生成标题</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_10.png" alt="">
                  <span>标题重复检测</span>
                </div>
                <div class="info--item">
                  <img src="images/icon_11.png" alt="">
                  <span>热门关键词推荐</span>
                </div>
              </div>
              <div class="button">
                立即优化
              </div>
            </li>
          </ul>
        </div>
        <!-- 第三块end -->
        <!-- 教程视频start -->
        <div class="Tutorial_video">
          <div class="title">教程视频</div>
          <div class="con">
            <ul>
              <li>
                <img src="images/video_01.png" alt="">
              </li>
              <li>
                <img src="images/video_02.png" alt="">
              </li>
              <li>
                <img src="images/video_03.png" alt="">
              </li>
              <li>
                <img src="images/video_04.png" alt="">
              </li>
              <li>
                <img src="images/video_05.png" alt="">
              </li>

            </ul>
          </div>
        </div>
        <!-- 教程视频end -->
        <!-- 模板展示start -->
        <div class="Template_display">
          <div class="title">模板展示</div>
          <div class="con">
            <div class="swiper-container swiper-container02">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="images/template_01.png" alt="">
                </div>
                <div class="swiper-slide">
                  <img src="images/template_02.png" alt="">
                </div>
                <div class="swiper-slide">
                  <img src="images/template_03.png" alt="">
                </div>
                <div class="swiper-slide">
                  <img src="images/template_04.png" alt="">
                </div>
                <div class="swiper-slide">
                  <img src="images/template_05.png" alt="">
                </div>
                <div class="swiper-slide">
                  <img src="images/template_06.png" alt="">
                </div>
              </div>
              <!-- Add Arrows -->
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <!-- 模板展示end -->
      </div>
      <!-- 底部 -->
      <footer>
        <div class="footer">
          <div class="left_foot">
            <div class="top">
              <span>旺旺客服：<img src="images/kf_01.png" alt=""></span>
              <span>投诉：<img src="images/kf_02.png" alt=""></span>
            </div>
            <div class="bottom">
              <span>联系电话：0592-321564</span>
              <span>服务时间：9:00-18:00</span>
            </div>
          </div>
          <span class="right_foot">
            <span>Copyright2008-2018 公司 All Rights Reserved ICP备090833号</span>
          </span>
        </div>
      </footer>
      <!-- 右侧导航条 -->
      <div id="leftsead">
        <ul>
          <li>
            <img src="images/right_01.png" alt="">
          </li>
          <li>
            <img src="images/right_02.png" alt="">

          </li>
          <li class="Feedback">
            <img src="images/right_03.png" alt="">
          </li>
        </ul>
      </div>
      <!-- 意见反馈 -->
      <div id="Feedback_con">
        <span class="tips">亲，欢迎填写意见反馈，您的宝贵意见就是我们提高和优化的最大动力。</span>
        <div class="type">
          <span>意见类型：</span>
          <ul class="type_list">
            <li class="active">产品改进</li>
            <li>操作问题</li>
            <li>随便说说</li>
          </ul>
        </div>
        <div class="Feedback_info">
          <span><em>*</em>反馈内容：</span>
          <textarea name="" id="" cols="30" rows="10" class="textarea">

          </textarea>
        </div>
        <div class="tel">
          <span>联系电话：</span>
          <input type="text">
          <b class="tel_tips">（选填，当我们不清楚您提交的问题时，还可以通过左边的号码联系到您）</b>
        </div>
        <div class="button">
          <div class="submit">提交</div>
          <div class="cancel">取消</div>
        </div>
      </div>
      <!-- 续费 -->
      <div id="xf">
          <div class="tips">尊敬的用户，你还有<em>7</em>天到期，请尽快续！</div>
      </div>
      <!-- 页面一打开就执行 -->
      <div id="start">
        <div class="title">
          <p class="status">续订一年赠</p>
          <p class="Offer"><em>送100元</em>或<em>100元短信</em></p>
        </div>
        <div class="time">
          活动截止时间：<span>2018-11-11</span>
        </div>
        <div class="btn"></div>
      </div>
    </div>
  </body>
  <script src="js/jquery.min.js"></script>
  <script src="js/swiper.min.js"></script>

  <script src="js/layer.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container01', {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination01',
        clickable: true,
      },
    });
    var swiper2 = new Swiper('.swiper-container02', {
      slidesPerView: 6,
      spaceBetween: 30,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    // 导航切换
    $(function () {
      $('.Announcement_tutorial .cont-tab-line').eq(1).show();
      $('.Announcement_tutorial .cont-tab-line').eq(1).siblings().hide();
      var $tab = $('.Announcement_tutorial .nav div'); //tab切换
      var $content = $('.Announcement_tutorial ul'); //要显示的内容
      $tab.click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var index = $(this).index(); //点击元素下标
        $content.eq(index).show().siblings().hide();
      })
    })
    // 店铺管理里面的二级菜单选择
    $('nav .content .nav ul li>ul li').click(function () {
      $(this).addClass('active').siblings().removeClass('active');
    })
    // 广告牌消失
    $('.swiper-slide .close_btn').click(function () {
      $(this).parent().parent().remove();
    })

    //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
    layer.ready(function () {
      layer.open({
        type: 1,
        title: false,
        shadeClose: true, //点击遮罩关闭
        content: $('#start')
      });
    });
    // 意见反馈
    $('.Feedback').on('click', function () {
      layer.open({
        type: 1,
        title: '意见反馈',
        area: ['710px', '408px'],
        shadeClose: true, //点击遮罩关闭
        content: $('#Feedback_con')
      });
    });
    // 续费
    $('nav .content .user .item.recharge .xf').on('click', function () {
      layer.open({
        type: 1,
        title: false,
        area: ['600px', '400px'],
        shadeClose: true, //点击遮罩关闭
        content: $('#xf')
      });
    })
    $('.cancel').on('click',function(){
      $("#Feedback_con").hide();
    })
  </script>

</html>